<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东营销风云榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../css/part/tabHead.css">
    <link rel="stylesheet" href="../../../css/part/mini.css">
</head>
<style>


    th {

        font-size: 10px;
        height: 22px;
    }

    td {

        height: 22px;
        font-size: 10px;

    }



</style>
<body>

<div id="app">
    <div id="tableHead">
        <img src="../../../img/part/performance/branchReach.png" id="branchHead" align="center">
        <a href="../../portal/navigationYX.html"><img src="../../../img/portal/min.png" id="miniImg"></a>
        <table width="100%">
            <tr >
                <thead>
                <th width="5%">NO</th>
                <th width="10%">机构</th>
                <th width="15%">月承保增长</th>
                <th width="15%">季度承保</th>
                <th width="15%">季承保增长</th>
                <th width="15%">年度承保</th>
                <th width="15%">年承保增长</th>
                </thead>
            </tr>
        </table>
    </div>
    <div id="midDiv"></div>
    <div class="tableBody">
        <table id="tab" width="100%">
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</div>
</body>
<script src="../../../js/vue.js"></script>
<script src="../../../js/axios.js"></script>
<script src="../../../js/head.js"></script>
<script src="../../../js/jquery-3.2.1.min.js"></script>
<script src="../../../js/share.js"></script>

<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data() {
                return {

                    //中支名称
                    branchsName: '',
                    //月承保增长
                    branchMonthIncrease: 0,
                    //营服达标数量
                    num: 0,
                    //营服总数
                    saleDeptNum: 0,
                    //营服达标率
                    branchReachYield: 0,
                    //季度承保
                    branchQuarterInSure: 0,
                    //季承保增长
                    branchQuarterIncrease: 0,
                    //年度承保
                    branchYearInSure: 0,
                    //年承保增长
                    branchYearIncrease: 0,
                    //年达成率
                    yearReachYield: 0,

                    pojo: {},
                    divHeight: 0,


                }
            },
            created() {
                this.getBranchAttend();
            },
            methods: {

                //获取各中支的数据
                getBranchAttend() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    setTimeout(() => {
                        axios.get(`/performance/getBranchReach`).then(response => {
                            this.pojo = response.data;
                            var str = "";//定义用于拼接的字符串
                            for (var i = 0; i < this.pojo.length; i++) {
                                this.branchMonthIncrease = this.branchMonthIncrease + this.pojo[i].branchMonthIncrease;
                                this.branchQuarterInSure = this.branchQuarterInSure + this.pojo[i].branchQuarterInSure;
                                this.branchQuarterIncrease = this.branchQuarterIncrease + this.pojo[i].branchQuarterIncrease;
                                this.branchYearInSure = this.branchYearInSure + this.pojo[i].branchYearInSure;
                                this.branchYearIncrease = this.branchYearIncrease + this.pojo[i].branchYearIncrease;

                                this.num = this.num + this.pojo[i].num;

                                str = "<tr><td width=\"5%\">" + (i + 1) + "</td>" +
                                    "<td width=\"10%\">" + this.pojo[i].branchsName + "</td>" +
                                    "<td width=\"15%\">" + this.pojo[i].branchMonthIncrease + "</td>" +
                                    "<td width=\"15%\">" + this.pojo[i].branchQuarterInSure + "</td>" +
                                    "<td width=\"15%\">" + this.pojo[i].branchQuarterIncrease + "</td>" +
                                    "<td width=\"15%\">" + this.pojo[i].branchYearInSure + "</td>" +
                                    "<td width=\"15%\">" + this.pojo[i].branchYearIncrease + "</td></tr>";
                                //追加到table中
                                $("#tbody").append(str);
                            }
                            str = "<tr style='background: #1894fd;'><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                                "<th width=\"15%\">" + this.branchMonthIncrease + "</th>" +
                                "<th width=\"15%\">" + this.branchQuarterInSure + "</th>" +
                                "<th width=\"15%\">" + this.branchQuarterIncrease + "</th>" +
                                "<th width=\"15%\">" + this.branchYearInSure + "</th>" +
                                "<th width=\"15%\">" + this.branchYearIncrease + "</th></tr>";
                            $("#tbody").append(str);

                        })
                    }, 200)
                },
                //小数处理
                pointHandle(_this) {
                    var data = _this + "";
                    if (data.indexOf(".") != -1) {
                        return data
                    }
                    return data + ".0";
                },
                //数据处理
                dataHandle(_this) {
                    var data = _this + "";
                    if (data.indexOf(".") != -1) {
                        return data + '%'
                    }
                    if (data == -9999) {
                        return '-'
                    }
                    return data + ".0" + '%';
                },
                //处理两数相除
                doubleHandle(a, b) {
                    if (b == 0) {
                        return -9999;
                    } else {
                        return Math.round(a * 1000 / b) / 10;
                    }
                }

            }
        })
    }
</script>

</html>